<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #canvas {}
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute float a_PointSize;
    attribute vec2 a_Pin;
    varying vec2 v_Pin;

    attribute vec4 a_Color;
    varying vec4 v_Color;

    uniform mat4 u_ModelMatrix;
    void main(){
        gl_Position = u_ModelMatrix * a_Position;
        gl_PointSize = a_PointSize;
        v_Color = a_Color;
        v_Pin = a_Pin;
    }
</script>
<!-- 片元着色器 -->
<!-- 注意:第一行的精度一定要加 -->
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_Pin;
    varying vec4 v_Color;
    void main(){
        gl_FragColor = texture2D(u_Sampler, v_Pin);
    }
</script>
<!-- 测试 -->
<script id="fragmentShader1" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_Pin;
    varying vec4 v_Color;
    void main(){
        vec4 v = texture2D(u_Sampler, v_Pin);
        if(v.r <= 0.9 ){
            v = vec4(1,0,0,0);
        }
        gl_FragColor = v;
    }
</script>
<!-- 正片叠底 -->
<script id="fragmentShader1" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler1;
    uniform sampler2D u_Sampler2;
    varying vec2 v_Pin;
    varying vec4 v_Color;
    void main(){
        vec4 t1 = texture2D(u_Sampler1, v_Pin);
        vec4 t2 = texture2D(u_Sampler2, v_Pin);
        gl_FragColor = t1 * t2;
    }
</script>
<!-- 两张半透的图片进行叠加(115-多图纹理) -->
<script id="fragmentShader2" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler1;
    uniform sampler2D u_Sampler2;
    varying vec2 v_Pin;
    varying vec4 v_Color;
    uniform float u_Set;
    void main(){
        vec4 t1 = texture2D(u_Sampler1, v_Pin);
        vec4 t2 = texture2D(u_Sampler2, v_Pin);
        gl_FragColor = mix(t1 , t2 , u_Set);
    }
</script>
<!-- 蒙版叠加(116-多图纹理2) -->
<script id="fragmentShader3" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler1;
    uniform sampler2D u_Sampler2;
    uniform sampler2D u_Sampler3;
    varying vec2 v_Pin;
    varying vec4 v_Color;
    uniform float u_Set;
    void main(){
        vec4 t1 = texture2D(u_Sampler1, v_Pin);
        vec4 t2 = texture2D(u_Sampler2, v_Pin);
        vec4 t3 = texture2D(u_Sampler3, v_Pin);
        float f = clamp((t3.r + u_Set), 0.0, 1.0);
        gl_FragColor = mix(t1 , t2 , u_Set);
    }
</script>
<!-- 换装纹理(117-多图纹理3) -->
<script id="fragmentShader4" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Mask1;
    uniform sampler2D u_Texture1;
    uniform sampler2D u_Texture2;
    uniform sampler2D u_Sampler1;
    varying vec2 v_Pin;
    uniform float u_Set;

    varying vec4 v_Color;
    void main(){
        vec4 u_Mask1 = texture2D(u_Mask1, v_Pin);
        vec4 u_Texture1 = texture2D(u_Texture1, v_Pin);
        vec4 u_Texture2 = texture2D(u_Texture2, v_Pin);
        vec4 u_Sampler1 = texture2D(u_Sampler1, v_Pin);
        vec4 yf = vec4(1, 1, 1, 1);
        if(u_Mask1.x > 0.5){
            //这个吧目前做不成半透的,只能拿Color.a = u_Set 来做
            yf = mix(u_Texture1, u_Texture2, u_Set);
        }
        yf = yf * u_Sampler1;
        gl_FragColor = yf;
    }
</script>




<script type="module" src="./jsDemo/Demo115-多图纹理.js"></script>
<script>

</script>

</html>